<template>
  <el-tree ref="tree" node-key="id" :data="nodes"
           :default-expanded-keys="expandId" @node-click="click"
           :expand-on-click-node="false" accordion>
    <template slot-scope="{ node, data }">
      <tree-node :node="node" :data="data" :max-level="maxLevel"
                 :append-node="appendNode" :remove-node="removeNode" :modify-node="modifyNode"></tree-node>
    </template>
  </el-tree>
</template>

<script>
/* eslint-disable */
import TreeNode from "./tree-node";
import Layers from "@/lang/layers";

/**
 * 可编辑树形结构
 *
 * 我们的树形结构数据，一般都是采用这种方式实现。
 */
export default {
    name: 'SeaEditableTree'
    , components: {TreeNode}
    , props: {
        // 已有的树形结构数据，组件内部不做格式转换
        options: {type: Array, default: undefined},
        // 默认展开第一个节点，主要是为了界面美观，不需要则指定为空数组
        expandKey: {type: Array, default: undefined},
        // 最大层级限制，避免用户无限扩展树的节点
        maxLevel: {type: Number, default: undefined},
        // 点击事件
        click: {type: Function, default: undefined},
        // 创建 限定Promise函数 return new node
        create: {type: Function, default: undefined},
        // 删除 限定Promise函数 return boolean/false
        remove: {type: Function, default: undefined},
        // 修改
        modify: {type: Function, default: undefined}
    }
    , data() {
        return {
            instance: undefined,
            // 节点数据
            nodes: undefined,
            // 需要展开的节点列表
            expandId: undefined
        }
    }
    , watch: {
        options: {
            handler: function (val) {
                this.setOptions(val);
            }
        }
    }
    , created() {
        this.setOptions(this.options);
    }
    , mounted() {
        this.instance = this.$refs.tree;
    }
    , methods: {
        /**
         * 设置树形数据
         *
         * @param opts 树形数据
         */
        setOptions: function (opts) {
            this.nodes = opts;
            if (this.expandKey !== undefined) {
                this.expandId = this.expandKey;
            } else {
                if (Layers.isNotEmpty(opts)) {
                    this.expandId = [opts[0]['id']];
                }
            }
        }
        /**
         * 追加节点
         *
         * @param parent 父级节点数据
         * @param data 数据
         */
        , appendNode: function (parent, node) {
            if (this.create !== undefined) {
                this.create(parent, node).then(data => {
                    this.instance.append(data, parent);
                }).catch(err => {
                    Layers.warn(err);
                });
            }
        }
        /**
         * 移除节点
         *
         * @param data 数据
         */
        , removeNode: function (data, node) {
            if (this.remove !== undefined) {
                this.remove(data, node).then(() => {
                    this.instance.remove(data);
                }).catch(err => {
                    Layers.warn(err);
                });
            }
        }
        /**
         * 修改节点
         *
         * @param data 数据
         */
        , modifyNode: function (data, node) {
            if (this.modify !== undefined) {
                this.modify(data, node);
            }
        }
    }
};
</script>
